<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CourseSelect</title>
<script src="../jquery-3.5.1.js"></script>
<script src="../jquery.cookie.js"></script>
<script>
	var userid = sessionStorage.getItem('testKey');
	if (userid == null || userid == "") {
		window.location = "/login.html";
	}
</script>
<style>
body {
	font-size: 75%;
	font-family: verdana, arial, 'sans serif';
	background-repeat: repeat-x;
	background-color: #FFFFF0;
	color: #000080;
}

h1 {
	font-size: 200%;
}

h2 {
	font-size: 140%;
}

h4 {
	font-size: 110%;
}

th {
	background-color: #ADD8E6;
}

.button1 {
	background-color: #000000;
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
}

.foot {
	position: fixed;
	bottom: 5px;
	text-align: center;
	padding: 10px;
	border-radius: 6px;
	background-image: linear-gradient(to bottom right, #ffb21a, #ffdd99);
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #333;
}

li {
	float: left;
}

li a {
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

li a:hover {
	background-color: #111;
}

.active {
	background-color: #bfbfbf;
}
</style>
<script type="text/javascript">
	window.onload = function() {
		$.ajax({

			type : 'GET',
			url : "/courseTeaching",
			contentType : "application/json;cherset=utf-8",
			dataType : "json",
			success : function(data) {
				var InData = data;
				var html = "";
				console.log(data);
				var sid = sessionStorage.getItem('testKey');
				for (var i = 0; i < data.length; i++) {
					//访问每一个的属性，根据属性拿到值

					html += "<tr>";
					html += "<td>" + data[i].course.name + "</td>";
					html += "<td>" + data[i].course.id + "</td>";
					html += "<td>" + data[i].semester + "</td>";
					html += "<td>" + data[i].course.credit + "</td>";
					html += "<td>" + data[i].year + "</td>";
					html += "<td>" + data[i].teacher.name + "</td>";
					html += "<td><button type='button' onclick='Select("
							+ data[i].id+"," + sid + ")'>选择 </button></td>";
					html += "</tr>";
				}

				$("#inTable").html(html);

			},
			error : function(data) {
				alert("error:" + JSON.stringify(data));
			}
		});

	}
	function Select(courseTeachingId, sid) {
		console.log(courseTeachingId);
		console.log(sid);
		if (confirm("真的要选择该课程？")) {
			/*$.ajax({

				type : "post",
				url : "/courseSelection",
				data : {
					sid : sid,
					courseTeachingId : 2
				},
				contentType : "application/json;cherset=utf-8",
				success : function() {
					alert("选课成功");
					location.reload();
				},
				error : function() {
					alert("error")
				}
			})*/
			//应该用post 而不是  ajax。
			$.post("/courseSelection", {
						sid: sid,
						courseTeachingId: courseTeachingId
					},
					function(data) {
						alert("选课成功");
						location.reload();
					})
		}

	}
</script>
</head>
<body>

	<ul>
		<!--导航栏 -->
		<li><a href="StudentPage.html">主页</a></li>
		<li><a class="active" href="CourseSelect.html">选课页面</a></li>
		<li><a href="StuScore.html">分数查询</a></li>
		<li><a href="StuCourses.html">查看已选课程</a></li>
		<li style="float: right"><a href="AccountModify.html">修改密码</a></li>
	</ul>
	<br />
	<table>
		<thead>
			<tr>
				<th>课程名称</th>
				<th>课程编号</th>
				<th>开课学期</th>
				<th>学分</th>
				<th>学年</th>
				<th>开课教师</th>

				<th></th>

			</tr>
		</thead>

		<tbody id="inTable">

		</tbody>
	</table>
	<div id="footer" class="foot">
		<em style="color: white">[made by group four]</em>
	</div>
</body>
</html>